<template>
	<!-- 资迅详情页面 -->
	<view class="information-details" :style="'height:'+detailsHeight+'rpx;'">
		<view class="details-head">
			<view class="details-title">{{datailData.title}}</view>
			<view class="details-fuTitle">
				<image class="details-img" src="../../static/images/tabbar/eyes.png" mode=""></image>
				<view class="details-count">{{datailData.count}}</view>
				<view class="details-time">{{datailData.createtime}}</view>
			</view>
		</view>
		<view class="details-main">
			<rich-text :nodes="parsedNodes"></rich-text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				parsedNodes: "",
				datailData: {}, //详情数据
				detailsHeight: 0, //屏幕高度
			};
		},
		onLoad(options) {
			let encodedData = options.datailData; // 获取传递的编码后的参数
			let decodedData = decodeURIComponent(encodedData); // 解码参数
			this.datailData = JSON.parse(decodedData); // 尝试解析 JSON 数据
			console.log(this.datailData)
			this.parseRichText()
		},
		mounted() {
			let sysInfo = uni.getSystemInfoSync()
			let scaleFactor = 750 / sysInfo.windowWidth
			this.detailsHeight = sysInfo.windowHeight * scaleFactor
		},
		methods: {
			parseRichText() { //拿到后端返回的数据中的信息，并修改图片样式
				const imgTag = /<img[^>]+src="([^"]+)"[^>]*>/g;
				const result = this.datailData.content.replace(imgTag, (match, src) => {
					return `<img src="${src}" class="custom-image" style="width:100%;height:auto"></img>`;
				});
				this.parsedNodes = result
			}
		},
	}
</script>

<style lang="scss" scoped>
	.information-details {
		padding: 0 3vw;
		background: #fff;
		padding-top: 2vh;

		.details-head {
			.details-title {
				font-size: 38rpx;
				font-weight: bold;
			}

			.details-fuTitle {
				font-size: 26rpx;
				// border: 1px solid #f00;
				// margin-left: -10vw;//*****
				// transform: scale(0.8);
				box-sizing: border-box;
				display: flex;
				padding: 30rpx 0;
				color: #8a8a8a;

				.details-img {
					width: 35rpx;
					height: 35rpx;
					margin-right: 10rpx;
				}

				.details-count {
					width: 10%;
				}

				.details-time {
					width: 90%;
					text-align: right;
				}
			}
		}

		.details-main {
			font-size: 26rpx;
			// rich-text img {
			//   width: 100px; /* 设置图片宽度为父元素宽度的100% */
			//   height: auto; /* 高度自适应宽度比例 */
			// }
		}
	}
</style>